<template></template>

<script lang="ts" setup>
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import { nextTick, onMounted, ref } from 'vue'
import { steps } from "@/components/Driver/index";
import { storage } from "@/utils/Storage";

// 引导页设置: https://github.com/kamranahmedse/driver.js
const driver = ref()
onMounted(() => {
  let flag = storage.get('GUIDE', false)
  if (!flag) {
    nextTick(() => {
      startDriver()
    })
  }
})

const startDriver = () => {
  driver.value = new Driver({
    animate: false,
    opacity: 0.75,
    padding: 10,
    allowClose: true,
    overlayClickNext: false,
    doneBtnText: '完成',
    closeBtnText: '关闭',
    stageBackground: '#ffffff',
    nextBtnText: '下一步',
    prevBtnText: '上一步',
    onReset: (ele: any) => {
      storage.set('GUIDE', true)
    },
  })
  driver.value.defineSteps(steps())
  driver.value.start()
}
</script>

<style scoped>

</style>
